<template>
	<view class='my_userinfo'>
		<view class="head_background">
			<view class="head_image">
				<image :src="userinfo.avatarUrl" mode="" class="img"></image>
			</view>
			<view class="user_name">
				{{userinfo.nickName}}
			</view>
		</view>

		<view class="bottom_content">
			<view class="exit" @click="exit">
				<view class="text">
					退出登录
				</view>
				<uni-icons type='right'></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: "my_userinfo",
		data() {
			return {
				// token: this.tokens
			};
		},
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
			async exit() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)

				if (succ && succ.confirm) {
					//  token 清空
					// this.token = ''
					this.updateToken('')
					this.updateUserInfo('')
					// this.$emit('clsToken', this.token)
				}
			}
		},

		props: ['tokens']
	}
</script>

<style lang="scss">
	.head_background {
		display: flex;
		background-color: #fc6c42;
		height: 200px;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.head_image {
			margin-bottom: 10px;
		}

		image {
			height: 100px;
			width: 100px;
			border-radius: 50%;
			box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
		}
	}

	.bottom_content {
		display: flex;
		flex-direction: column;

		.exit {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 10px 10px;
			margin: 0px 10px;
		}
	}
</style>
